<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
<!-- 富文本编辑器 js引入-->
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/ueditor.all.min.js}">
	
</script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
<script th:src="@{/layui/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/common.js}"></script>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script type="text/javascript">
$(document).ready(function(){
	var height = $(window).height();
	$("#addDiv").css({"height":height});
});
window.onresize = function(){
	var height = $(window).height();
	$("#addDiv").css({"height":height});
}
</script>
</head>
<body class="layui-layout-body">
	<div id="addDiv" align="center" style="overflow:auto;">
		<div style="margin-top: 50px;">
			<form id="addForm" class="layui-form layui-form-pane"
				th:action="@{/chat/add_and_edit}" method="post">
				<input name="id" style="display: none;" th:value="${data != null ? data.id : ''}">
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>群聊名称</label>
						<div class="layui-input-inline">
							<input name="name" placeholder="群聊名称"
								class="layui-input" maxlength="50" th:value="${data != null ? data.name : ''}">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>群聊ID</label>
						<div class="layui-input-inline">
							<input name="chatId" placeholder="群聊ID"
								class="layui-input" maxlength="50" th:value="${data != null ? data.chatId : ''}">
						</div>
					</div>
				</div>
				<!-- 图片预览 -->
				<div class="layui-form-item">
					<div class="layui-input-block">
						<div class="layui-input-inline" style="width: 400px;" align="center">
							<img th:src="${data != null ? data.image : ''}" src="" style="width: 40px;height: 40px;display: block;" id="previewImg">
							<span> (建议尺寸112*112，大小不超过100KB)</span>
						</div>
					</div>
				</div>
				<!-- 图片地址 -->
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>图标</label>
						<div class="layui-input-inline" style="width: 500px;" align="left">
							<input type="text" name="image" style="display: none;" th:value="${data != null ? data.image : ''}">
							<input type="button" value="浏览" class="layui-input" onclick="selectFile()" style="width: 200px;">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<label class="layui-form-label"><span style="color: #f00;">*</span>排序：</label>
						<div class="layui-input-inline">
							<input name="sort" placeholder="排序" class="layui-input" value=""
								maxlength="100" th:value="${data != null ? data.sort : ''}">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<div class="layui-input-inline" style="width: 500px;" align="left">
							<input type="radio" name="publish" value="1" title="推荐" th:checked="${data != null ? data.publish == 1 : 'true'}"/>
							<input type="radio" name="publish" value="0" title="未推荐" th:checked="${data != null ? data.publish == 0 : 'false'}"/>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
	<input onchange="onFileChange(event)" type="file" name="icon" id="qiniuFile" style="display: none;">
	<script type="text/javascript">
		function selectFile(){
			$("#qiniuFile").click();
		}
		function onFileChange(e) {
			let files = e.target.files || e.dataTransfer.files;
			if (!files.length) {
				return;
			}
			if (files[0]['size'] > 100000) {
				alert("图片过大");
				return false;
			}
			createImage(files);
		}
		function createImage(file, val) {
			var mypic = document.getElementById("qiniuFile").files[0];
			var windowUrl = window.URL.createObjectURL(mypic);
			// 创建对象
			var img = new Image()
			// 改变图片的src
			img.src = windowUrl
			img.onload = function(){
		        // 打印
		       /*  if (img.width != img.height) {
		        	layer.msg("图片比例只能为1:1");
					return false;
		        } */
		        
		        if (img.width != 112 || img.height != 112) {
		        	layer.msg("图片比例只能为112*112哦！");
					return false;
		        }
		        uploadImg(file);
		    } 
		}
		function uploadImg(file){
			$.get('http://qiniu.systoon.com/getToken.php', function(e) {
				var formData = new FormData();
				formData.append('token', e);
				formData.append('file', file[0]);
				$.ajax({
					url : 'http://upload.qiniu.com',
					type : 'POST',
					data : formData,
					async : false,
					cache : false,
					contentType : false,
					processData : false,
					success : function(e) {
						var url = 'http://apr.qiniu.toon.mobi/' + e.key;
						console.warn(url);
						$("#previewImg").attr("src",url);
						$("form input[name='image']").val(url);
					},
					error : function(e) {
						alert('upload error' + e);
					}
				});
			});
		}
	</script>
</body>
</html>